<template>
  <!-- 这是消息的第一个页面 -->
  <div class="body">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <div class="app">
      <div class="time">{{ formattedTime }}</div>
    </div>
    <img class="a2tu" src="../../images/image.png" alt="" />
    <div class="liaot">
       <div>感谢使用【妙手医生】服务！ 挂号、问诊、购药、上妙手医生！</div>
      <p>★近期热门推荐</p>
      <p>>>名医直播问诊，医生与你面对面</p>
      <p>
        <img
          src="../../images/0A68D081.png"
          alt=""
        />
        <router-link to="/xiao/dianj">点此进入!</router-link>
      </p>
      <p>★我们提供便捷的就医服务：</p>
      <p>
        我要
        <img
          src="../../images/0A68D081.png"
          alt=""
        />
        <router-link to="/xiao/yuyue">预约挂号</router-link>
      </p>
      <p>
        我要
        <img
          src="../../images/0A68D081.png"
          alt=""
        />
        <router-link to="/xiao/jisu">极速问诊</router-link>
      </p>
       <p>
        我要
        <img
          src="../../images/0A68D081.png"
          alt=""
        />
        专家问诊
      </p>
      <p>★您的专属服务</p>
      <p>
        <img
          src="../../images/0A68D081.png"
          alt=""
        />
        我的医生
      </p>
      <p>
        <img
          src="../../images/0A68D081.png"
          alt=""
        />
        我的问诊记录
      </p>
      <p>
        <img
          src="../../images/0A68D081.png"
          alt=""
        />
        我的用药记录
      </p>
      <p>
        <img
          src="../../images/0A68D081.png"
          alt=""
        />
        我的挂号记录
      </p>  
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTime: new Date(),
    }
  },
  computed: {
    formattedTime() {
      const options = {
        hour: '2-digit',
        minute: '2-digit',
        hour12: false,
      }
      return this.currentTime.toLocaleString('zh-CN', options)
    },
  },
  mounted() {
    setInterval(() => {
      this.currentTime = new Date()
    }, 1000)
  },
}
</script>

<style lang="scss">
.body {
  width: 100vw;
  height: 100vh;
  background-color: #f7f5f5;
  font-size: .3rem;
}
.app {
  height: 1.5rem;
  text-align: center;
  font-family: Arial, sans-serif;
  line-height: 1.5rem;
}
.time {
  font-size: 0.3rem;
  color: #aaa;
}
.a2tu {
  width: 1rem;
  height: 1rem;
  margin-left: 0.2rem;
  float: left;
}
p{
  height: .25rem;
}
.liaot {
  width: 5.4rem;
  height: 8rem;
  float: left;
  margin-left: 0.2rem;
  background-color: #fff;
  text-decoration: none;
  img {
    width: .4rem;
    height: .4rem;
    vertical-align:middle;
  }
}
</style>
